<template>
  <div class="app-container">
    <!-- *************************************搜索区************************************* -->
    <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" :inline="true">
      <!-- 账单生成时间 -->
      <el-form-item :label="$t('时间选择')" prop="timeBetween">
        <el-date-picker
          style="width: 350px"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          v-model="queryParams.timeBetween"
          type="datetimerange">
        </el-date-picker>
      </el-form-item>
      <!-- 账单类型 -->
      <el-form-item :label="$t('账单类型')" prop="type">
        <el-select clearable v-model="queryParams.type" @change="handleQuery">
          <el-option
            v-for="item in bill_type_distributor_list"
            :label="item.dictLabel"
            :value="item.dictValue"
            :key="item.id" />
        </el-select>
      </el-form-item>

      <!-- 租户 -->
      <!-- <el-form-item :label="$t('租户')" prop="distrId">
        <el-select clearable v-model="queryParams.distrId" @change="handleQuery">
          <el-option v-for="item in distrList" :label="item.name" :value="item.distrId" :key="item.id" />
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          <!-- 搜索 -->
          {{ $t('搜索') }}
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
          <!-- 重置 -->
          {{ $t('重置') }}
        </el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
    </el-row>
    <el-table
      :height="calTableHeight()"
      v-loading="loading"
      ref="TableRef"
      :data="tableData"
      row-key="menuId">
      <!-- 租户 -->
      <!-- <el-table-column :label="$t('租户')" align="center" show-overflow-tooltip prop="distrId" /> -->
      <el-table-column :label="$t('账单类型')" align="center" show-overflow-tooltip prop="type">
        <template slot-scope="{ row }">
          <span :style="{ color: handlePayTypeColor(row.type) }">
            {{ handlePayType(row.type) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('应收款金额')" prop="payAmount">
        <!-- 应收款金额 1RMB 2JPY 3USD -->
        <template slot-scope="{ row }">
          {{ row.payAmount ? (+row.payAmount).toFixed() : '' }}
          <span v-if="row.payCurrency == 1">RMB</span>
          <span v-if="row.payCurrency == 2">JPY</span>
          <span v-if="row.payCurrency == 3">USD</span>
        </template>
      </el-table-column>
      <!-- 人民币对日汇率 -->
      <el-table-column align="center" show-overflow-tooltip prop="rmbRate" :label="$t('人民币对日汇率')" />
      <!-- 美元对日汇率 -->
      <el-table-column align="center" show-overflow-tooltip prop="usdRate" :label="$t('美元对日汇率')" />

      <!-- 结账类型 1:线上支付 2:手动结账 -->
      <el-table-column align="center" show-overflow-tooltip prop="payType" :label="$t('结账类型')">
        <template slot-scope="{ row }">
          <span v-if="row.payType == 1">
            <!-- 线上支付 -->
            {{ $t('线上支付') }}
          </span>
          <span style="color: orange" v-if="row.payType == 2">
            <!-- 手动结账 -->
            {{ $t('手动结账') }}
          </span>
        </template>
      </el-table-column>

      <el-table-column align="center" show-overflow-tooltip prop="beforeFunds" :label="$t('变动前金额')" />

      <el-table-column align="center" show-overflow-tooltip prop="afterFunds" :label="$t('变动后金额')" />

      <el-table-column align="center" show-overflow-tooltip prop="changeType" :label="$t('变动类型')">
        <template slot-scope="{ row }">
          {{ row.changeType == 1 ? '增加' : '减少' }}
        </template>
      </el-table-column>

      <!-- 账单生成时间 -->
      <el-table-column align="center" show-overflow-tooltip prop="createTime" :label="$t('账单生成时间')" />
      <el-table-column align="center" show-overflow-tooltip prop="payTime" :label="$t('卖家支付日期')" />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="payAmountUpdateRemark"
        :label="$t('卖家支付金额修改备注')" />
      <!-- 操作 -->
      <el-table-column align="center" fixed="right" :label="$t('操作')">
        <template slot-scope="{ row }">
          <el-button
            v-hasPermi="[
              'distribution:bill:getDistributionBillBeforeList',
              'distribution:bill:getDistributionBillSkuFeeList',
            ]"
            type="text"
            size="small"
            @click="handleDetail(row)">
            <!-- 查看 -->
            {{ $t('查看') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <Detail
      :type="detailInfo.type"
      :show.sync="detailInfo.show"
      :title="detailInfo.title"
      :data="detailInfo.data" />
  </div>
</template>

<script>
import { getDistributionBillBeforeList, getDistributionBillSkuFeeList, list } from '@/api/bill/distributer'
import { getDistrList } from '@/api/bill/seller'
import { useDict } from '@/utils/useDict'
import Detail from './components/detail.vue'
import { checkPermi } from '@/utils/permission'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'Distributer',
  components: {
    Detail,
  },
  data() {
    return {
      showSearch: false,
      /**
       * 租户列表
       */
      distrList: [],
      /**详情信息 */
      detailInfo: {
        /**显示详情 */
        show: false,
        type: '',
        title: '',
        data: [],
        query: {},
      },

      /**
       * 账单类型
       */
      bill_type_distributor_list: [],
      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        timeBetween: [],
        pageNum: 1,
        pageSize: 10,
        type: '',
      },
    }
  },
  created() {
    this.getList()
    useDict('bill_type_distributor').then(({ bill_type_distributor }) => {
      this.bill_type_distributor_list = bill_type_distributor
    })
    // this.getDistrList()
  },
  methods: {
    /**
     * 获取租户
     */
    getDistrList() {
      getDistrList().then((res) => {
        // console.log(`res ==>`, res);
        this.distrList = res.rows
      })
    },

    handleDetail(row) {
      const { id, type, typeId } = row
      this.detailInfo.title = this.handlePayType(type)
      this.detailInfo.type = type
      console.log(`.type ==>`, typeId, type)
      switch (+type) {
        case 1 /**订单批次sku费用 type=1 */:
          getDistributionBillSkuFeeList({ typeId }).then((res) => {
            const { code, data, msg } = res
            if (code === 200) {
              this.detailInfo.data = data
              this.detailInfo.show = true
            }
          })
          break
        case 2 /**提前付款 type=2 */:
          getDistributionBillBeforeList({ typeId }).then((res) => {
            const { code, data, msg } = res
            if (code === 200) {
              this.detailInfo.show = true
              this.detailInfo.data = data
            }
          })
          break
        case 3 /**阶段性付款 type=3 */:
          break
        case 4 /**再发货SKU费用 type=4 */:
          break
        case 5 /**返品SKU退费 type=5 */:
          break

        default:
          break
      }
    },
    handlePayType(type) {
      const index = this.bill_type_distributor_list.findIndex((i) => i.dictValue == type)
      if (index > -1) return this.bill_type_distributor_list[index].dictLabel
    },
    handlePayTypeColor(type) {
      switch (type) {
        case 1:
          return '#32CCBC'
        case 2:
          return '#F6416C'
        case 3:
          return '#28C76F'
        case 4:
          return '#F55555'
        case 5:
          return '#9708CC'
        case 6:
          return '#736EFE'
        case 7:
          return '#D939CD'
        case 8:
          return '#3CD500'
        case 9:
          return '#00EAFF'

        default:
          return '#7367F0'
      }
    },

    /** 查询菜单列表 */
    getList() {
      this.loading = true
      const params = JSON.parse(JSON.stringify(this.queryParams))
      const { timeBetween } = params
      const startTime = timeBetween ? timeBetween[0] : ''
      const endTime = timeBetween ? timeBetween[1] : ''
      delete params.timeBetween
      const data = {
        ...params,
        startTime,
        endTime,
      }
      list(data).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      Object.keys(this.queryParams).forEach((key) => (this.queryParams[key] = ''))
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
  },
}
</script>
<style lang="scss"></style>
